<!-- Created by mhy on 2018/6/27.

 -->
<style scoped lang="scss">
    .u-wrap{
        position: relative;
        width: 70.8333%;
        margin: 70px auto 0 auto;
        background: #fff;
    }

    .u-header{
        height: 94px;
        position: relative;
        border-bottom: 2px solid rgba(216,216,216,1);
    }

    .u-name{
        position: absolute;
        left: 50px; top: 36px;
        height:40px;
        font-size:28px;
        color:rgba(48,54,65,1);
        line-height:40px;
    }

    .u-btn{
        position: absolute;
        width:80px;
        height:37px;
        top: 33px; right: 50px;
        background:rgba(255,82,62,1);
        border-radius:5px;
        color: #fff;
        font-size:12px;
        text-align: center;
        line-height: 37px;
    }

    .u-body{
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 0 50px;
        min-width: 750px;
        overflow: hidden;
        padding-bottom: 356px;
    }

    .u-block{
        position: relative;
        height: 106px;
        border-bottom: 1px solid #E5E5E5;
    }

    .u-regist{
        position: absolute;
        left: 0; top: 50px;
        height: 37px; line-height: 37px;
        color: #303641;
        font-size: 26px;
    }

    .u-red{
        color: #FF523E;
    }

    button{
        cursor: pointer;
    }

    .u-item-block{
        position: relative;
        height: 129px;
        font-size: 16px;
        border-bottom: 1px solid #E5E5E5;
    }

    .u-item-label{
        position: absolute;
        left: 0; top: 30px;
    }

    .u-item-text{
        position: absolute;
        right: 0; top: 30px;
    }

    .u-vip-update{
        position: absolute;
        left: 0; top: 82px;
        color: #F5A623;
    }

    .u-pass-btn{
        position: absolute;
        line-height: 30px; text-align: center;
        width:60px;
        height:30px;
        background:rgba(2,187,0,1);
        border-radius:5px;
        color: #fff;
        bottom: 23px; right: 70px;
    }

    .u-refuse-btn{
       @extend .u-pass-btn;
       background: #F5A623; right: 0;
    }

    .u-btn-black{
        @extend .u-btn;
        color: #fff;
        background: #000;
    }

    .c-title{
        position: relative;
        height: 80px;
        background:rgba(242,242,242,1);
    }
</style>

<template>
    <div class="u-wrap">
        <div class="u-header">
            <div class="u-name">画水彩的小伙子</div>
            <button class="u-btn" @click="addBlackList">加入黑名单</button>
            <button class="u-btn-black" @click="removeBlackList">解除黑名单</button>
        </div>

        <div class="u-body">
            <UheadItem/>
            <Uitem label="状态" text="正常" orange/>
            <Uitem label="备注" text="这个客户等几天再付款截图给我">
                <button slot="label">修改</button>
            </Uitem>
            <Uitem label="装裱大师ID" text="GIr889Ha"/>
            <Uitem label="VIP期限至" text="2018-08-09 12:33:56">
                <button slot="label">修改</button>
            </Uitem>

            <div class="u-item-block">
                <div class="u-item-label">VIP期限至</div>
                <div class="u-item-text">2018-08-09 12:33:56</div>
                <div class="u-vip-update">修改为 2018-08-09 12:33:56 等待财务授权</div>
                <button class="u-pass-btn">通过</button>
                <button class="u-refuse-btn">拒绝</button>
            </div>
            <Uitem label="购买VIP记录" text="3条" green/>
            <Uitem label="邀请有奖记录" text="3条" green/>
            <Uitem label="最近登录：" text="2018-08-09 12:33:56"/>
            <Uitem label="绑定手机：" text="086 15359008888"/>

            <div class="u-block"><div class="u-regist">注册信息</div></div>
            <Uitem label="注册方式" text="微信"/>
            <Uitem label="微信昵称" text="Mr.Liang"/>
            <Uitem label="注册日期" text="2018-08-09 12:33:56"/>
            <Uitem label="注册设备" text="UDID:IEIieo89geno322o3JLLI3I889090LNLEAallagoneai"/>
        </div>

    </div>
</template>

<script>
    import {mapActions,mapState} from 'vuex'
    import UheadItem from './u-head-item.vue'
    import Uitem from './u-item.vue'
    export default {
        data () {
            return {

            }
        },
        components: {
            UheadItem,
            Uitem
        },
        mounted () { 
        },
        methods: {
            addBlackList () {
                this.$xalert.open({
                    title: '确定将“画水彩的小伙子”加入黑名单吗？',
                    btnColor: 'rgba(255,82,62,1)',
                    btnText: '加入黑名单',
                    success: () => {
                        alert(document.body.offsetHeight)
                        this.$xalert.close()
                    }
                })
            },
            removeBlackList () {
                this.$xalert.open({
                    title: '确定将“画水彩的小伙子”解除黑名单吗？',
                    btnColor: '#000',
                    btnText: '解除黑名单',
                    success: () => {
                        alert(document.body.offsetHeight)
                        this.$xalert.close()
                    }
                })
            }

        }
    }
</script>
